<template>
  <div>
    <div class="card">
      <div>
        <img :src="`${zhos.images}`" />
      </div>
      <div>
        <p>
          <b>{{ zhos.hname }}</b>
        </p>
        <p>
          <span>{{ zhos.hinfo.split(" ")[0] }}</span
          ><span>{{ zhos.hinfo.split(" ")[1] }}</span>
        </p>
        <p>重点科室:{{ zhos.keshi }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    zhos: {
      type: Object,
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.card {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 3vw;
  align-items: center;
}

.card > div:first-child {
  width: 30%;
  margin-right: 2vw;
}

.card > div:first-child > img {
  width: 100%;
  border-radius: 0.5rem;
}

.card > div:last-child {
  width: 70%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-wrap: nowrap;
}

.card > div:last-child > p:nth-child(2) {
  margin: 3vw 0;
}

.card > div:last-child > p > span {
  font-size: 0.5rem;
  border-radius: 0.2rem;
  padding: 0.5vw 2vw;
  margin-right: 2vw;
}

.card > div:last-child > p:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #666;
}

.card > div:last-child > p > span:first-child {
  background-color: rgb(254, 236, 218);
  color: rgb(250, 127, 5);
}

.card > div:last-child > p > span:last-child {
  background-color: rgb(210, 251, 230);
  color: rgb(4, 195, 99);
}
</style>